<template>
	<view class="meal">
		<u-navbar :autoBack="true" leftIconColor="#fff" title="订单记录" :bgColor="theme == 'light' ? '#0071ff' : '#2c2c2c'"
			:safeAreaInsetTop="true" :placeholder="true" titleStyle="color:#fff">
		</u-navbar>
		<!-- <u-empty
		        mode="order"
		        icon="https://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty> -->
		<u-empty
		        mode="list"
		        icon="none"
				v-if="mealList.length == 0"
		>
		</u-empty>
		<view class="cu-list menu-avatar" style="margin:10px;border-radius: 10px;" v-for="item,index in mealList"
			:key="index" @click="mealclick(item)">
			<view class="cu-item">
				<view class="cu-avatar">
					<u--image :showLoading="true" src="../../static/orderS.png" width="50px" height="50px" radius="5"></u--image>
				</view>
				<view class="content">
					<view class="text-grey" style="font-size: 24rpx;">订单号 ：{{item.orderId}}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut text-color">
							￥{{item.orderPrice}}
						</view>
						<view class="text-cut text-color" style="margin-left: 20rpx;">
							时间 ：{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="action">
					<view class="cu-tag round bg-grey sm">￥{{item.pkgPrice}}</view>
					<view class="text-grey text-xs">已购买</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				mealList: [

				],
				pageNum:1,
			}
		},
		computed: {
			...mapState(['theme', ])

		},
		onLoad() {
			this.orderList()
		},
		methods: {
			//查询订单列表
			async orderList() {
				const {
					data
				} = await uni.$u.http.get(`/busi/userPkgOrders/list?pageNum=${this.pageNum}&pageSize=10`)
				if(data.rows.length>0){
					this.mealList =this.mealList.concat(data.rows) 
				}else{
					uni.showToast({
						title: "暂无更多数据",
						icon: "none",
					});
				}
				
			},
			
			async mealclick(e){
				console.log(e);
				const {
					data
				} = await uni.$u.http.get(`/busi/userPkgOrders/getByOrderStatus?orderId=${e.orderId}`)
				
			}
		},
		//触底加载事件
		onReachBottom(){
			this.pageNum += 1
			this.orderList()
		}

	};
</script>

<style lang="scss" scoped>
	
</style>